<template>
  <div class="dynamicDetails">
    <Header v-bind:isBack="isBack" v-bind:title="title"></Header>
    <div class="list-item padding-24 bg-f">
      <div class="head space-between">
        <img :src="dynamicDetails.user_avator" alt />
        <div class="right space-between">
          <div class="flex-column">
            <div class="center-col">
              <p class="name fs-26">{{dynamicDetails.nickname}}</p>
              <p
                class="fs-26 color-6"
              >{{dynamicDetails.dynamic_type==1?'发布动态':(dynamicDetails.dynamic_type==2?'发布视频':'转发')}}</p>
            </div>
            <p class="fs-22 color-9">{{dynamicDetails.created_at}}</p>
          </div>
          <div
            class="gzh bg-p color-f fs-24 center"
            v-if="dynamicDetails.is_attention==0&&userinfo.user_id!=dynamicDetails.user_id"
            @click="tocollect(dynamicDetails.user_id)"
          >+关注</div>
        </div>
      </div>
      <div class="content space-between">
        <div class="none"></div>
        <div class="right">
          <p class="text fs-32" v-if="dynamicDetails.dynamic_type!=3">{{dynamicDetails.content}}</p>
          <p class="text fs-32" v-if="dynamicDetails.dynamic_type==3">{{dynamicDetails.viewpoint}}</p>
          <div
            class="img-list flex wrap"
            v-if="dynamicDetails.image_url&&dynamicDetails.dynamic_type!=3"
          >
            <img
              :src="items"
              alt
              v-for="(items,indexs) in dynamicDetails.image_url"
              :key="indexs"
              @click.stop="lookimg(dynamicDetails.image_url)"
              :class="{oneimg:dynamicDetails.image_url.length==1}"
            />
          </div>
          <div class="video" v-if="dynamicDetails.video_url&&dynamicDetails.dynamic_type!=3">
            <video
              :src="dynamicDetails.video_url"
              autoplay
              :poster="dynamicDetails.video_cover"
              controls
              x5-playsinline="true"
              playsinline="true"
              webkit-playsinline="true"
              v-if="dynamicDetails.id==id"
            ></video>
            <div class="img" v-else @click="playvideo(dynamicDetails.id)">
              <img :src="dynamicDetails.video_cover" alt />
              <div class="play center yuan">
                <p class="play-btn"></p>
              </div>
            </div>
          </div>

          <div class="forwarding bg-f5 padding-24" v-if="dynamicDetails.dynamic_type==3">
            <p class="text fs-32">
              <span>@{{dynamicDetails.original_dynamic_user_name.nickname}}</span>
              {{dynamicDetails.content}}
            </p>
            <div class="video" v-if="dynamicDetails.video_url">
              <video
                :src="dynamicDetails.video_url"
                autoplay
                :poster="dynamicDetails.video_cover"
                controls
                x5-playsinline="true"
                playsinline="true"
                webkit-playsinline="true"
                v-if="dynamicDetails.id==id"
              ></video>
              <div class="img" v-else @click="playvideo(dynamicDetails.id)">
                <img :src="dynamicDetails.video_cover" alt />
                <div class="play center yuan">
                  <p class="play-btn"></p>
                </div>
              </div>
            </div>

            <div class="forwardingimg-list flex wrap" v-if="dynamicDetails.image_url">
              <img
                :src="items"
                alt
                v-for="(items,indexs) in dynamicDetails.image_url"
                @click.stop="lookimg(dynamicDetails.image_url)"
                :key="indexs"
                :class="{oneimg:dynamicDetails.image_url.length==1}"
              />
            </div>
          </div>
          <div class="share space-between padding-24" v-if="dynamicDetails.music_list_photo">
            <img :src="dynamicDetails.music_list_photo" alt />
            <div class="right flex-column">
              <p class="fs-32 color-0 overFlow">{{dynamicDetails.music_list_name}}</p>
              <p class="fs-24 color-6">{{dynamicDetails.singer_name}}</p>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="comments">
      <div class="tops space-between padding-24">
        <p>最新评论({{commentlist.total_number}})</p>
      </div>
      <div class="comments-list bg-f" v-if="commentlist.total_number>0">
        <div
          class="list-items padding-24"
          v-for="(item,index) in commentlist.result"
          :key="index"
          @click="showReplyModel(item)"
        >
          <div class="heads space-between">
            <img :src="item.user_avator" alt class="cove" />
            <div class="right space-between">
              <div class="flex-column">
                <div class="center-col">
                  <p class="name fs-26 color-6">{{item.nickname}}</p>
                </div>
                <p class="fs-22 color-9">{{item.created_at}}</p>
              </div>
              <div class="zan center-col fs-24 color-6">
                <p>{{item.comment_click_number}}</p>
                <img :src="dianzan" alt v-if="item.is_click==0" @click="zancomments(item.id)" />
                <img :src="zan" alt v-else />
              </div>
            </div>
          </div>
          <div class="content space-between">
            <div class="none"></div>
            <div class="right">
              <p class="text fs-32">{{item.content}}</p>
              <p
                class="reply fs-24"
                @click="toCommentReply(item.comment_id)"
                v-if="item.reply_number>0"
              >{{item.reply_number}}条回复></p>
            </div>
          </div>
          <!-- <div class="choose padding-24 color-f fs-32 space-around" >
                        <p>回复</p>
                        <span>|</span>
                        <p>复制</p>
                        <span>|</span>
                        <p>举报</p>
          </div>-->
        </div>
      </div>
      <div class="center" v-else>暂无评论</div>
    </div>

    <div class="make-comments bg-f padding-24 space-between" v-if="isPublish">
      <textarea placeholder="写评论..." v-model="text"></textarea>
      <div class="right space-between">
        <img :src="dianzan" alt @click="tozan" v-if="dynamicDetails.is_click==0" />
        <img :src="zan" alt @click="tozan" v-else />
        <img :src="zhuanfa" alt @click="gotoforwarding" />
        <p class="fs-28 color-active" :class="{notext:text==''}" @click="sendcomment">发送</p>
      </div>
    </div>
    <div class="make-comments bg-f padding-24 space-between" v-else>
      <textarea
        :placeholder="replyContent"
        @blur="stopReply"
        v-model="descReply"
        v-focus="picFocusStatus"
      ></textarea>
      <div class="right space-between">
        <img :src="dianzan" alt @click="tozan" v-if="dynamicDetails.is_click==0" />
        <img :src="zan" alt @click="tozan" v-else />
        <img :src="zhuanfa" alt @click="gotoforwarding" />
        <p class="fs-28 color-active" :class="{notext:descReply==''}" @click.stop="sendReplyComment">发送</p>
      </div>
    </div>
    <div class="logout lookimg center" @touchmove.prevent v-if="look" @click="look=false">
      <div class="img-box">
        <!-- <img :src="imgshow" alt=""> -->
        <swiper :options="swiperOption" class="swiper" v-if="imgshow.length > 0">
          <swiper-slide v-for="(item,index) in imgshow" :key="index">
            <img :src="item" alt class="imgList" />
          </swiper-slide>
          <div class="swiper-pagination" slot="pagination"></div>
        </swiper>
      </div>
    </div>
    <!-- 回复评论模态框 -->
    <div class="comment-model" @touchmove.prevent v-show="isShowReply" @click="closeModel">
      <div class="content" @click.stop="replyComment">
        <div class="reply-comment fs-28">回复评论</div>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      isBack: true,
      look: false,
      title: "详情",
      dynamicDetails: "",
      id: "",
      userinfo: "",
      text: "",
      zhuanfa: require("../../assets/account/zhuanfa.png"),
      dianzan: require("../../assets/account/dianzan.png"),
      zan: require("../../assets/account/zan.png"),
      commentlist: [],
      imgshow: [],
      swiperOption: {
        // 是一个组件自有属性，如果notNextTick设置为true，组件则不会通过NextTick来实例化swiper，也就意味着你可以在第一时间获取到swiper对象，假如你需要刚加载遍使用获取swiper对象来做什么事，那么这个属性一定要是true
        notNextTick: true,
        // 循环
        loop: false,
        // 设定初始化时slide的索引
        initialSlide: 0,
        // 滑动速度
        speed: 300,
        // 滑动方向
        loopedSlides: 1,
        direction: "horizontal",
        // 小手掌抓取滑动
        grabCursor: true,
        slidesPerView: "auto",
        pagination: {
          el: ".swiper-pagination"
        },
        on: {
          // 滑动之后回调函数
          slideChangeTransitionStart: function() {
            /* realIndex为滚动到当前的slide索引值 */
            this.imgIndex = this.realIndex - 1;
          }
        }
      },
      isPublish: true, //判断当前是发布评论  还是回复评论
      replyContent: "", //回复占位文本内容
      isShowReply: false, //是否展示回复模态框
      picFocusStatus: false,
      descReply: "" //回复评论的内容
    };
  },
  directives: {
    focus: {
      inserted: function(el, { value }) {
        if (value) {
          el.focus();
        }
      }
    }
  },
  created() {
    this.getuserinfo();
    this.getdynamicDetails();
  },
  methods: {
    // 回复评论框失去焦点且文本框内没有内容或者已经回复结束
    stopReply() {
      if (this.descReply == "") {
        this.isPublish = true;
      }
    },
    // 显示回复评论模态框
    showReplyModel(item) {
      console.log(item, "---item");
      console.log(item.comment_id, "---item.comment_id");
      this.replyCommentId = item.comment_id;
      this.replyContent = "回复" + item.nickname;
      this.isShowReply = true;
    },
    // 关闭模态框
    closeModel() {
      this.isPublish = true;
      this.isShowReply = false;
    },
    // 点击了回复评论
    replyComment() {
      this.isShowReply = false;
      this.isPublish = false;
      this.picFocusStatus = true;
    },
    // 查看评论回复
    toCommentReply(id) {
      this.$router.push({
        path: "/index/comment-reply",
        query: { status: 4, id: id }
      });
    },
    // 发送回复评论
    sendReplyComment() {
      const url = this.$host1 + `home/dynamic/replyComment`;
      var params = {
        comment_id: this.replyCommentId,
        reply_text: this.descReply
      };
      this.$axios
        .post(url, params)
        .then(res => {
          // console.log(res.data,'---res.data--');
          if (res.data.code == 200) {
            this.descReply = "";
            this.getdynamicDetails();//重新获取下朋友评论数据
          } else {
            this.AlertWin(res.data.message);
          }
        })
        .catch(err => {
          console.log(err, "err-----");
        });
    },
    getuserinfo() {
      var url = this.$host1 + `home/getPersonalMsg`;
      this.$axios
        .get(url)
        .then(res => {
          //console.log(res)
          //return
          if (res.status == 200) {
            let resData = res.data;
            if (resData.code == 200) {
              this.userinfo = resData.data;
            } else if (resData.code == 0) {
              // this.$router.push('/login');
            } else {
              this.AlertWin(resData.message);
            }
          }
        })
        .catch(() => {
          this.AlertWin("网络错误！请稍后重试！");
        });
    },
    getdynamicDetails() {
      let url = this.$host1 + `home/dynamic/videoInfo`;
      this.$axios
        .get(url, {
          params: {
            dynamic_id: this.$route.query.id
          }
        })
        .then(res => {
          console.log(res);
          //return
          if (res.status == 200) {
            let resData = res.data;
            if (resData.code == 200) {
              //this.dynamiclist=resData.data.result
              this.dynamicDetails = resData.data;
              this.getrelatedComment();
            } else {
              this.dynamiclist = "";
              this.AlertWin(resData.message);
            }
          }
        })
        .catch(() => {
          this.dynamiclist = "";
          this.AlertWin("网络错误！请稍后重试！");
        });
    },
    getrelatedComment() {
      let url = this.$host1 + `home/dynamic/relatedComment`;
      this.$axios
        .get(url, {
          params: {
            dynamic_id: this.$route.query.id
          }
        })
        .then(res => {
          console.log(res);
          //return
          if (res.status == 200) {
            let resData = res.data;
            if (resData.code == 200) {
              //this.dynamiclist=resData.data.result
              this.commentlist = resData.data;
            } else {
              this.dynamiclist = "";
              this.AlertWin(resData.message);
            }
          }
        })
        .catch(() => {
          this.dynamiclist = "";
          this.AlertWin("网络错误！请稍后重试！");
        });
    },
    playvideo(i) {
      this.id = i;
    },
    tocollect(id) {
      let url = this.$host1 + `home/friend/eachAttention`;
      var data = {
        user_love_id: id
      };
      this.$axios
        .post(url, data)
        .then(res => {
          console.log(res);
          //return
          if (res.status == 200) {
            let resData = res.data;
            if (resData.code == 200) {
              this.AlertWin("关注成功！");
              this.getdynamicDetails();
            } else {
              this.AlertWin(resData.message);
            }
          }
        })
        .catch(() => {
          this.AlertWin("网络错误！请稍后重试！");
        });
    },
    lookimg(i) {
      //console.log(i)
      this.look = true;
      this.imgshow = i;
    },
    sendcomment() {
      if (this.text == "") {
        return;
      } else {
        let url = this.$host1 + `home/dynamic/publishComment`;
        var data = {
          dynamic_id: this.$route.query.id,
          content: this.text
        };
        this.$axios
          .post(url, data)
          .then(res => {
            console.log(res);
            //return
            if (res.status == 200) {
              let resData = res.data;
              if (resData.code == 200) {
                //this.dynamiclist=resData.data.result
                this.AlertWin("发表成功！");
                this.getrelatedComment();
                this.text = "";
              } else {
                this.AlertWin(resData.message);
              }
            }
          })
          .catch(() => {
            this.AlertWin("网络错误！请稍后重试！");
          });
      }
    },
    tozan() {
      let url = this.$host1 + `home/dynamic/ClickRecord`;
      var data = {
        dynamic_id: this.$route.query.id
      };
      this.$axios
        .post(url, data)
        .then(res => {
          console.log(res);
          //return
          if (res.status == 200) {
            let resData = res.data;
            if (resData.code == 200) {
              this.getdynamicDetails();
            } else {
              this.AlertWin(resData.message);
            }
          }
        })
        .catch(() => {
          this.AlertWin("网络错误！请稍后重试！");
        });
    },
    zancomments(i) {
      let url = this.$host1 + `home/dynamic/commentClickRecord`;
      var data = {
        comment_id: i
      };
      this.$axios
        .post(url, data)
        .then(res => {
          console.log(res);
          //return
          if (res.status == 200) {
            let resData = res.data;
            if (resData.code == 200) {
              this.getrelatedComment();
            } else {
              this.AlertWin(resData.message);
            }
          }
        })
        .catch(() => {
          this.AlertWin("网络错误！请稍后重试！");
        });
    },
    gotoforwarding(id) {
      this.$router.push({
        path: "/forwarding",
        query: {
          id: this.$route.query.id
        }
      });
    }
  }
};
</script>
<style lang="scss">
.dynamicDetails {
  .list-item {
    margin-top: 1rem;
    height: 100%;
    border-bottom: 0.01rem solid #e9e9e9;
    .head {
      height: 1rem;
      img {
        width: 0.75rem;
        height: 0.75rem;
        border-radius: 50%;
        object-fit: cover;
      }
      .right {
        width: calc(100% - 1rem);
        height: 0.75rem;
        .name {
          color: #3875d1;
          margin-right: 0.2rem;
        }
        .gzh {
          width: 1.05rem;
          height: 0.44rem;
          border-radius: 0.22rem;
        }
      }
    }
    .content {
      margin-top: 0.1rem;
      height: auto;
      padding-bottom: 0.2rem;
      .none {
        width: 0.75rem;
        height: auto;
      }
      .right {
        width: calc(100% - 1rem);
        height: auto;
        .text {
          line-height: 0.4rem;
        }
        .img-list {
          width: 100%;
          height: auto;
          img {
            width: 1.9rem;
            height: 1.9rem;
            object-fit: cover;
            border-radius: 0.1rem;
            margin: 0.1rem 0.05rem 0;
          }
          .oneimg {
            width: auto;
            max-width: 100%;
            height: auto;
            max-height: 5rem;
            object-fit: cover;
            border-radius: 0.1rem;
          }
        }
        .video {
          margin-top: 0.1rem;
          width: 100%;
          height: 3.4rem;
          border-radius: 0.05rem;
          .img {
            width: 100%;
            height: 100%;
            position: relative;
            border-radius: 0.05rem;
            img {
              width: 100%;
              height: 100%;
              object-fit: cover;
              border-radius: 0.05rem;
            }
            .play {
              width: 1rem;
              height: 1rem;
              border: 0.01rem solid rgba(255, 255, 255, 0.8);
              background-color: rgba(0, 0, 0, 0.5);
              position: absolute;
              top: 50%;
              margin-top: -0.5rem;
              left: 50%;
              margin-left: -0.5rem;
              //border-radius: 0.05rem;
              .play-btn {
                width: 0;
                height: 0;
                margin-left: 0.4rem;
                width: 0px;
                height: 0px;
                border-left: 0.3rem solid transparent;
                border-top: 0.2rem solid transparent;
                border-right: 0.3rem solid #fff;
                border-bottom: 0.2rem solid transparent;
                opacity: 0.7;
                transform: rotate(180deg);
              }
            }
          }

          video {
            width: 100%;
            height: 100%;
            background-color: #444;
            border-radius: 0.05rem;
          }
        }
        .share {
          width: 100%;
          height: 1.2rem;
          background-color: #f5f5f5;
          margin-top: 0.1rem;
          border-radius: 0.05rem;
          img {
            width: 0.87rem;
            height: 0.87rem;
            object-fit: cover;
            border-radius: 0.06rem;
          }
          .right {
            width: calc(100% - 1rem);
            height: 0.8rem;
          }
        }
        .forwarding {
          padding-top: 0.001rem;
          margin-top: 0.1rem;
          width: 100%;
          height: auto;
          border-radius: 0.1rem;
          padding-bottom: 0.2rem;
          .text {
            margin-top: 0.2rem;
            span {
              color: #3875d1;
              margin-right: 0.3rem;
            }
          }
          video {
            width: 100%;
            height: 3.25rem;
            margin-top: 0.1rem;
            border-radius: 0.05rem;
          }
          .forwardingimg-list {
            width: 100%;
            height: auto;
            img {
              width: 1.74rem;
              height: 1.74rem;
              object-fit: cover;
              border-radius: 0.1rem;
              margin: 0.1rem 0.05rem 0;
            }
            .oneimg {
              width: auto;
              max-width: 100%;
              height: auto;
              max-height: 4rem;
              object-fit: cover;
              border-radius: 0.1rem;
            }
          }
        }
        .foot {
          width: 100%;
          height: 1rem;
          .left {
            width: 5rem;
            height: 100%;
            //background-color: greenyellow;
            img {
              width: 0.3rem;
              height: 0.3rem;
              margin-right: 0.2rem;
            }
          }
          .more {
            width: 0.08rem;
            height: 0.3rem;
          }
        }
      }
    }
  }
  .comments {
    margin-bottom: 1.2rem;
    .tops {
      height: 0.8rem;
    }
    .comments-list {
      //background-color: greenyellow;
      .list-items {
        position: relative;
        height: auto;
        border-bottom: 0.01rem solid #e9e9e9;
        .heads {
          //background-color: red;
          height: 1rem;
          .cove {
            width: 0.8rem;
            height: 0.8rem;
            border-radius: 50%;
            object-fit: cover;
          }
          .right {
            width: calc(100% - 1rem);
            height: 0.8rem;
            .zan {
              img {
                width: 0.24rem;
                height: 0.26rem;
                margin-left: 0.1rem;
              }
            }
          }
        }
        .content {
          height: auto;
          padding-bottom: 0.2rem;
          .none {
            width: 0.75rem;
            height: auto;
          }
          .right {
            width: calc(100% - 1rem);
            height: auto;
            .text {
              line-height: 0.4rem;
            }
            .reply {
              color: #3875d1;
              margin-top: 0.2rem;
            }
          }
        }
        .choose {
          width: 3.3rem;
          height: 0.95rem;
          background-color: #4c4c4c;
          position: absolute;
          top: 0;
          left: 50%;
          margin-left: -1.65rem;
          border-radius: 0.2rem;
        }
        .choose::after {
          content: "";
          position: absolute;
          width: 0;
          height: 0;
          left: 0.4rem;
          top: 1rem;
          border-left: 0.3rem solid transparent;
          border-top: 0.2rem solid transparent;
          border-right: 0.8rem solid #4c4c4c;
          border-bottom: 0.2rem solid transparent;
          transform: rotate(270deg);
        }
      }
      .list-items:last-child {
        border-bottom: none;
      }
    }
  }
  .lookimg {
    background-color: rgba(0, 0, 0, 1);
    .img-box {
      width: 100%;
      height: 100%;
      //background-color: #fff;
      .swiper {
        width: 100%;
        height: 100%;
        //background-color: red;
        // max-height: 80%!important;
        .swiper-wrapper {
          // width: 100%;
          // height: 100%!important;
          display: flex;
          align-items: center;
          //background-color: blue;
          .swiper-slide {
            //margin-right: 0.2rem;
            width: 100% !important;
            height: 100% !important;
            //position: absolute;
            display: flex;
            justify-content: center;
            align-items: center;
            //background-color: green;
            img {
              width: 100%;
              height: auto;
              max-height: 100%;
              object-fit: cover;
            }
          }
        }
        .swiper-pagination {
          width: auto;
          //height: 0.2rem;
          //background-color: #fff;
          //z-index: 9;
          display: flex;
          align-items: center;
          position: absolute;
          bottom: 1rem;
          left: 50%;
          //top: 50%;
          transform: translate(-50%, 0);
          margin: 0 auto;
          .swiper-pagination-bullet {
            width: 0.2rem;
            height: 0.2rem;
            text-align: center;
            line-height: 0.2rem;
            font-size: 0.24rem;
            background-color: #fff;
          }
          .swiper-pagination-bullet-active {
            background-color: #fff;
          }
        }
      }
    }
  }
  .make-comments {
    border-top: 0.01rem solid #e9e9e9;
    height: auto;
    min-height: 1rem;
    position: fixed;
    bottom: 0;
    left: 0;
    textarea {
      background-color: #eee;
      width: 5rem;
      height: auto;
      min-height: 0.4rem;
      max-height: 1.6rem;
      font-size: 0.32rem;
      line-height: 0.4rem;
      border: none;
      outline: none;
      // padding: 0.1rem;
      // box-sizing: border-box;
    }
    .right {
      width: calc(100% - 5.2rem);
      img {
        width: 0.37rem;
        height: 0.37rem;
      }
      .notext {
        opacity: 0.5;
      }
    }
  }
  // 回复评论模态框样式
  .comment-model {
    width: 100%;
    height: 100%;
    position: fixed;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    z-index: 1000;
    background-color: rgba(0, 0, 0, 0.5);
    .content {
      width: 90%;
      border-radius: 0.2rem;
      padding: 0.14rem 0.24rem;
      box-sizing: border-box;
      height: 1rem;
      position: absolute;
      left: 50%;
      top: 40%;
      transform: translate(-50%);
      background-color: #fff;
      .reply-comment {
        margin-top: 0.2rem;
      }
    }
  }
}
</style>